<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>AIplatform</title>
  <link rel="stylesheet" href="/static/css/cropper.css">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  
  <style>
    .container {
      max-width: 960px;
      margin: 20px auto;
    }

    img {
      max-width: 100%;
    }

    .row,
    .preview {
      overflow: hidden;
    }

    .col {
      float: left;
    }

    .col-10 {
      width: 83.30%;
      background-color: #888
    }

    .col-2 {
      width: 16.7%;
      overflow: hidden;
      background-color: #fff
    }
    .tags {
    	margin: 10px 5px;
    }
    .previewimg {
    	height: 350px;
    	overflow: scroll;
    	background-color: #eee
    }

  </style>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">AIplatform</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav">

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="/logout">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>
  <div class="container">
    <div class="row">
      <div class="col col-10">
        <img id="image" src="/static/images/{{.Obj.Fname}}" alt="Picture">

      </div>
      <div class="col col-2">
       <div class="previewimg">
       		<div class="preview"></div>
       </div>
        <div class="tags">
          <div>{{.Obj.Fname}}</div>
        	<a href="?index={{.Pre}}">上一张</a>
        	<a id="next" href="?index={{.Next}}">下一张</a>
        	<span>{{.Index}}/{{.Count}}</span>
        </div>
       <div class="tags">
       		<div>标签</div>
          <input type="hidden" id="id" value="{{.Index}}">
        	<input type="text" id="tag" value="{{.Obj.Tag}}">
        </div>
        <div class="tags">
        	<div>说明</div>
        	<input type="text" id="info" value="{{.Obj.Info}}">
        </div>
        <div class="tags">
        	<button id="btnsave">标记</button>
          <span id="stats"></span>
        </div>
      </div>
    </div>
  </div>
  <!-- Scripts -->

  <script src="/static/js/jquery-1.11.1.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="/static/js/jquery.pager.js"></script>
  <script src="/static/js/cropper.js"></script>
  <script>
    $(function () {
      var $previews = $('.preview');

      $('#image').cropper({
          ready: function (e) {
            var $clone = $(this).clone().removeClass('cropper-hidden');

            $clone.css({
              display: 'block',
              width: '100%',
              minWidth: 0,
              minHeight: 0,
              maxWidth: 'none',
              maxHeight: 'none'
            });

            $previews.css({
              width: '100%',
              overflow: 'hidden'
            }).html($clone);
          },

          crop: function (e) {
            var imageData = $(this).cropper('getImageData');
            var previewAspectRatio = e.width / e.height;

            $previews.each(function () {
              var $preview = $(this);
              var previewWidth = $preview.width();
              var previewHeight = previewWidth / previewAspectRatio;
              var imageScaledRatio = e.width / previewWidth;

              $preview.height(previewHeight).find('img').css({
                width: imageData.naturalWidth / imageScaledRatio,
                height: imageData.naturalHeight / imageScaledRatio,
                marginLeft: -e.x / imageScaledRatio,
                marginTop: -e.y / imageScaledRatio
              });
            });
          }
        });
      $('#btnsave').click( 
        function() {
          $("#stats").html("正在保存......")
          cropdata = $("#image").cropper('getData')
          data= {
              tag:$("#tag").val(),
              info:$("#info").val(),
              id:$("#id").val(),
              //blob:$("#image").cropper('getCroppedCanvas').toDataURL()
              width:cropdata.width,
              height:cropdata.height,
              top:cropdata.y,
              left:cropdata.x,
            }
          $.post("/up",data,function(result){

            $("#stats").html("完成");
          });
          // $.ajax({
          //   type: 'POST',
          //   url: "/up/",
          //   data: "",
          //   success: function(result){
          //     alert(result);
          //   },
          //   dataType: "html"
          // });
        }
      );
    });
  </script>
</body>
</html>
